// ignore_for_file: file_names

import 'package:flutter/material.dart';

class GridViewDemo3 extends StatelessWidget {
  const GridViewDemo3({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView案例3'),
        backgroundColor: Colors.pink,
      ),
      body: GridView.extent(
        // 主轴(垂直)默认为垂直方向，此属性用于固定侧轴(水平)方向子元素的最大宽度
        maxCrossAxisExtent: 100.0, // 设置侧轴方向子元素宽度，，此时每行展示的子元素个数是变化的
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 5.0,
        childAspectRatio: 4 / 3,
        children: [
          Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text('FLUTTER DART 1'),
          ),
          Container(
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text('FLUTTER DART 2'),
          ),
          Container(
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('FLUTTER DART 3'),
          ),
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('FLUTTER DART 4'),
          ),
          Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('FLUTTER DART 5'),
          ),
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('FLUTTER DART 6'),
          ),
          Container(
            color: Colors.purple,
            alignment: Alignment.center,
            child: const Text('FLUTTER DART 6'),
          ),
        ],
      ),
    );
  }
}
